<nz-divider></nz-divider>
<nz-breadcrumb>
  <nz-breadcrumb-item>
    <a [routerLink]="['/']">
      <i nz-icon nzType="home"></i>
      <span>{{ 'menu.dashboard' | i18n }}</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <a [routerLink]="['/monitors']" [queryParams]="{ app: monitor.app ? monitor.app : '' }">
      <i nz-icon nzType="reconciliation"></i>
      <span>{{ 'monitors.list' | i18n }}</span>
    </a>
  </nz-breadcrumb-item>
  <nz-breadcrumb-item>
    <i nz-icon nzType="edit"></i>
    <span>{{ 'monitors.edit' | i18n }} </span>
    <nz-tag style="font-size: 14px; border-radius: 4px" nzColor="#3f51b5">
      <span>{{ 'monitor.app.' + monitor.app | i18n }}</span>
    </nz-tag>
    <span>{{ 'monitor' | i18n }}</span>
    <a [href]="'https://hertzbeat.com/docs/help/' + monitor.app" target="_blank" style="float: right; margin-right: 5%">
      <button nz-button nzType="primary">
        <span>{{ 'common.button.help' | i18n }} </span>
        <span nz-icon nzType="question-circle"></span>
      </button>
    </a>
  </nz-breadcrumb-item>
</nz-breadcrumb>
<nz-divider></nz-divider>

<nz-spin [nzSpinning]="isSpinning" [nzTip]="spinningTip" nzSize="large">
  <div class="-inner-content">
    <form nz-form #editForm="ngForm">
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="host" nzRequired="true" [nzTooltipTitle]="'monitor.host.tip' | i18n">
          {{ 'monitor.host' | i18n }}
        </nz-form-label>
        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="monitor.host" nz-input name="host" type="text" id="host" required [placeholder]="'monitor.host.tip' | i18n" />
        </nz-form-control>
      </nz-form-item>
      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="name" nzRequired="true" [nzTooltipTitle]="'monitor.name.tip' | i18n">
          {{ 'monitor.name' | i18n }}
        </nz-form-label>
        <nz-form-control [nzSpan]="8" [nzErrorTip]="'validation.required' | i18n">
          <input [(ngModel)]="monitor.name" nz-input required name="name" type="text" id="name" [placeholder]="'monitor.name.tip' | i18n" />
        </nz-form-control>
      </nz-form-item>

      <nz-divider></nz-divider>

      <nz-form-item *ngFor="let paramDefine of paramDefines; let i = index">
        <nz-form-label
          *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
          nzSpan="7"
          [nzRequired]="paramDefine.required"
          [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control
          *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
          nzSpan="8"
          [nzErrorTip]="'validation.required' | i18n"
        >
          <input
            nz-input
            [(ngModel)]="params[i].value"
            [required]="paramDefine.required"
            [name]="paramDefine.field"
            [type]="paramDefine.type"
            [id]="paramDefine.field"
            [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
          />
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'textarea'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'textarea'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <textarea
            nz-input
            [(ngModel)]="params[i].value"
            [required]="paramDefine.required"
            [name]="paramDefine.field"
            [id]="paramDefine.field"
            [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
            rows="3"
          ></textarea>
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'password'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
            <input
              [type]="passwordVisible ? 'text' : 'password'"
              nz-input
              placeholder="input password"
              [required]="paramDefine.required"
              [(ngModel)]="params[i].value"
              [id]="paramDefine.field"
              [name]="paramDefine.field"
              [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
            />
          </nz-input-group>
          <ng-template #suffixTemplate>
            <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
          </ng-template>
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-input-number
            [(ngModel)]="params[i].value"
            [required]="paramDefine.required"
            [nzMin]="-1000"
            [nzMax]="65535"
            [nzStep]="1"
            [nzPlaceHolder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
            [name]="paramDefine.field"
            [id]="paramDefine.field"
          ></nz-input-number>
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'boolean'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-switch
            [(ngModel)]="params[i].value"
            (ngModelChange)="onParamBooleanChanged($event, paramDefine.field)"
            [required]="paramDefine.required"
            [name]="paramDefine.field"
            [id]="paramDefine.field"
          ></nz-switch>
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'radio'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <nz-radio-group
            [(ngModel)]="params[i].value"
            [required]="paramDefine.required"
            nzButtonStyle="solid"
            [name]="paramDefine.field"
            [id]="paramDefine.field"
          >
            <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
              {{ optionItem.label }}
            </label>
          </nz-radio-group>
        </nz-form-control>

        <nz-form-label *ngIf="paramDefine.type === 'key-value'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
          >{{ paramDefine.name }}
        </nz-form-label>
        <nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
          <app-key-value-input
            [(value)]="params[i].value"
            [id]="paramDefine.field"
            keyAlias="Header Name"
            valueAlias="Header Value"
          ></app-key-value-input>
        </nz-form-control>
      </nz-form-item>

      <nz-collapse [nzGhost]="true">
        <nz-collapse-panel [nzHeader]="extraColHeader" [nzShowArrow]="false">
          <nz-form-item *ngFor="let paramDefine of advancedParamDefines; let i = index">
            <nz-form-label
              *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
              nzSpan="7"
              [nzRequired]="paramDefine.required"
              [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control
              *ngIf="paramDefine.field !== 'host' && paramDefine.type === 'text'"
              nzSpan="8"
              [nzErrorTip]="'validation.required' | i18n"
            >
              <input
                nz-input
                [(ngModel)]="advancedParams[i].value"
                [required]="paramDefine.required"
                [name]="paramDefine.field"
                [type]="paramDefine.type"
                [id]="paramDefine.field"
                [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
              />
            </nz-form-control>

            <nz-form-label
              *ngIf="paramDefine.type === 'textarea'"
              nzSpan="7"
              [nzRequired]="paramDefine.required"
              [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'textarea'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <textarea
                nz-input
                [(ngModel)]="advancedParams[i].value"
                [required]="paramDefine.required"
                [name]="paramDefine.field"
                [id]="paramDefine.field"
                [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
                rows="3"
              ></textarea>
            </nz-form-control>

            <nz-form-label
              *ngIf="paramDefine.type === 'password'"
              nzSpan="7"
              [nzRequired]="paramDefine.required"
              [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'password'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <nz-input-group [nzSuffix]="suffixTemplate" style="width: 100%">
                <input
                  [type]="passwordVisible ? 'text' : 'password'"
                  nz-input
                  placeholder="input password"
                  [required]="paramDefine.required"
                  [(ngModel)]="advancedParams[i].value"
                  [id]="paramDefine.field"
                  [name]="paramDefine.field"
                  [placeholder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
                />
              </nz-input-group>
              <ng-template #suffixTemplate>
                <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
              </ng-template>
            </nz-form-control>

            <nz-form-label *ngIf="paramDefine.type === 'number'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'number'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <nz-input-number
                [(ngModel)]="advancedParams[i].value"
                [required]="paramDefine.required"
                [nzMin]="-1000"
                [nzMax]="65535"
                [nzStep]="1"
                [nzPlaceHolder]="paramDefine.placeholder ? paramDefine.placeholder : ''"
                [name]="paramDefine.field"
                [id]="paramDefine.field"
              ></nz-input-number>
            </nz-form-control>

            <nz-form-label *ngIf="paramDefine.type === 'boolean'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'boolean'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <nz-switch
                [(ngModel)]="advancedParams[i].value"
                [required]="paramDefine.required"
                [name]="paramDefine.field"
                [id]="paramDefine.field"
              ></nz-switch>
            </nz-form-control>

            <nz-form-label *ngIf="paramDefine.type === 'radio'" nzSpan="7" [nzRequired]="paramDefine.required" [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'radio'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <nz-radio-group
                [(ngModel)]="advancedParams[i].value"
                [required]="paramDefine.required"
                nzButtonStyle="solid"
                [name]="paramDefine.field"
                [id]="paramDefine.field"
              >
                <label nz-radio-button [nzValue]="optionItem.value" *ngFor="let optionItem of paramDefine.options">
                  {{ optionItem.label }}
                </label>
              </nz-radio-group>
            </nz-form-control>

            <nz-form-label
              *ngIf="paramDefine.type === 'key-value'"
              nzSpan="7"
              [nzRequired]="paramDefine.required"
              [nzFor]="paramDefine.field"
              >{{ paramDefine.name }}
            </nz-form-label>
            <nz-form-control *ngIf="paramDefine.type === 'key-value'" nzSpan="8" [nzErrorTip]="'validation.required' | i18n">
              <app-key-value-input
                [(value)]="advancedParams[i].value"
                [id]="paramDefine.field"
                keyAlias="Header Name"
                valueAlias="Header Value"
              ></app-key-value-input>
            </nz-form-control>
          </nz-form-item>
        </nz-collapse-panel>
      </nz-collapse>
      <ng-template #extraColHeader>
        <button style="top: -10px; margin-left: 40%" nz-button nzType="dashed" nz-tooltip [nzTooltipTitle]="'monitors.advanced.tip' | i18n">
          <span>{{ 'monitors.advanced' | i18n }}</span>
          <i nz-icon nzType="down-circle" nzTheme="outline"></i>
        </button>
      </ng-template>

      <nz-divider></nz-divider>

      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="intervals" [nzTooltipTitle]="'monitor.intervals.tip' | i18n">
          {{ 'monitor.intervals' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-input-number [(ngModel)]="monitor.intervals" [nzMin]="10" [nzMax]="604800" [nzStep]="60" name="intervals" id="intervals">
          </nz-input-number>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="detect" [nzTooltipTitle]="'monitors.detect.tip' | i18n">
          {{ 'monitors.detect' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-switch [(ngModel)]="detected" name="detect" id="detect"></nz-switch>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzSpan="7" nzFor="tags" [nzTooltipTitle]="'tag.bind.tip' | i18n">
          {{ 'tag.bind' | i18n }}
        </nz-form-label>
        <nz-form-control nzSpan="8">
          <nz-tag
            *ngFor="let tag of monitor.tags; let i = index"
            [nzMode]="tag.type === 1 ? 'closeable' : 'default'"
            (nzOnClose)="onRemoveTag(tag)"
            [nzColor]="tag.color"
            style="margin-top: 4px"
          >
            {{ sliceTagName(tag) }}
          </nz-tag>
          <a (click)="onShowTagsModal()">
            <nz-tag style="margin-top: 4px">
              <i nz-icon nzType="plus"></i>
              {{ 'tag.new' | i18n }}
            </nz-tag>
          </a>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7" nzFor="description" [nzTooltipTitle]="'monitor.description.tip' | i18n">
          {{ 'monitor.description' | i18n }}
        </nz-form-label>
        <nz-form-control [nzSpan]="8">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea [(ngModel)]="monitor.description" rows="3" nz-input name="description" id="description"></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>

      <div nz-row>
        <div nz-col nzSpan="8" nzOffset="9">
          <button nz-button nzType="primary" type="submit" (click)="onDetect(editForm.form)"> {{ 'common.button.detect' | i18n }} </button>
          <button nz-button nzType="primary" type="submit" (click)="onSubmit(editForm.form)"> {{ 'common.button.ok' | i18n }} </button>
          <button nz-button nzType="primary" type="reset" (click)="onCancel()"> {{ 'common.button.cancel' | i18n }} </button>
        </div>
      </div>
    </form>
  </div>
</nz-spin>

<!-- 选择TAG弹出框 -->
<nz-modal
  [(nzVisible)]="isManageModalVisible"
  [nzTitle]="'tag.bind' | i18n"
  (nzOnCancel)="onManageModalCancel()"
  (nzOnOk)="onManageModalOk()"
  nzMaskClosable="false"
  nzWidth="30%"
  [nzOkLoading]="isManageModalOkLoading"
>
  <div *nzModalContent class="-inner-content">
    <input
      style="margin-left: 5px; width: 50%; border-radius: 9px; text-align: center"
      nz-input
      type="text"
      [placeholder]="'tag.search' | i18n"
      nzSize="default"
      (keyup.enter)="loadTagsTable()"
      [(ngModel)]="tagSearch"
    />
    <button nz-button nzType="primary" routerLink="/setting/tags" style="margin-left: 5px; border-radius: 9px">
      <i nz-icon nzType="setting" nzTheme="outline"></i>
      {{ 'tag.setting' | i18n }}
    </button>
    <nz-table #smallTable nzSize="small" [nzData]="tags" [nzPageSize]="8" [nzLoading]="tagTableLoading">
      <thead>
        <tr>
          <th nzAlign="center" nzLeft nzWidth="4%" [(nzChecked)]="tagCheckedAll" (nzCheckedChange)="onAllChecked($event)"></th>
          <th nzAlign="left">{{ 'tag' | i18n }}</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of smallTable.data">
          <td nzAlign="center" nzLeft [nzChecked]="checkedTags.has(data)" (nzCheckedChange)="onItemChecked(data, $event)"></td>
          <td nzAlign="left">
            <nz-tag *ngIf="data.value == undefined || data.value.trim() == ''" [nzColor]="data.color">{{ data.name }}</nz-tag>
            <nz-tag *ngIf="data.value != undefined && data.value.trim() != ''" [nzColor]="data.color">
              {{ data.name + ':' + data.value }}
            </nz-tag>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
</nz-modal>
